<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{$CAT[catname]}</title>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="{DT_STATIC}hnr/screen/dist/css/swiper.min.css">
    <!-- Demo styles -->
    <style>
        html, body {position: relative;height: 100%;}
        body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}
        .swiper-container {width: 100%;height: 100%;}
        .page1 a,.page1 a{display: block; float: left; width: 355px; height: 720px; position: absolute;top:210px; }
        .page_list a{display: block; float: left;  width:488px; height:278px; position: absolute;}
        #close,#close1{width:108px; height:174px; cursor:pointer; background:url('{DT_STATIC}hnr/screen/dist/images/btn_return.png') no-repeat center center; position: fixed; bottom:50px; right:20px;}
        .page1{background: url('{DT_STATIC}hnr/screen/dist/images/bg1.jpg') no-repeat; background-size: cover;}
        .page_list{background: url('{DT_STATIC}hnr/screen/dist/images/bg2.jpg') no-repeat; background-size: cover;}
        .my-swiper-container {width: 100%;height: 100%;margin:0px auto;overflow: hidden;}
        .swiper-button-prev{left:50px!important; background: url("{DT_STATIC}hnr/screen/dist/images/btn_prev.png") no-repeat!important;}
        .swiper-button-next{right:0px!important;background: url("{DT_STATIC}hnr/screen/dist/images/btn_next.png") no-repeat!important;;}
        .swiper-button-next, .swiper-button-prev {top:0%; margin-top:480px;width: 150px; height:100px;background-size: cover!important;right: 10px;left: auto;}
        .home{background: url('{DT_STATIC}hnr/screen/dist/images/btn_home.png') no-repeat; background-size: cover;width:122px; height:188px; cursor:pointer;position:absolute; bottom:50px; right:20px;z-index: 2;}
        #playBox,#playBox1{width: 100%;  height: 100%; overflow: hidden; position: absolute; left:0px; top:0px; background: #000; z-index: 2;display: none;}
        #playBox .style{width: 607px!important; margin-left:656px;}
    </style>
</head>
<body>
<!-- 视频和图片弹出层 开始 -->
<div id="playBox">
    <div id="player" style="width:auto;height:  100%;text-align: center"></div>
    <div id="close"></div>
</div>
<div id="playBox1" style="overflow-y: auto; text-align: center;">
    <img src="" style="width: auto; height: auto;"/>
    <div id="close1"></div>
</div>
<!-- 视频和图片弹出层 结束 -->
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper ">
        <!--<div class="swiper-slide page1" style="background: url('1.jpg') no-repeat;">
          <a type="video" href="#" style="left:322px; ">1</a>
          <a href="#" style="left:713px;">2</a>
          <a href="#" style="left:1103px;">3</a>
          <a href="#" style="left:1495px;">4</a>
        </div>-->
        <!--
        =======================说明=======================
        type=video（视频），img（单独图片），“”（是外链）；
        Shape="hd"（横板），sd竖屏；
        id=“gopage3” 从page2跳转到page3，page3触屏滑倒page2；
        url=“”引入图片路径/视频路径
        href="" 外链地址，如果外链地址的话 需要添加target="_blank"
        -->
        <div class="swiper-slide page1">
            <!--{php $tags=tag("moduleid=$moduleid&condition=catid=1046 and status=3&offset=0&pagesize=4&order=level desc,addtime desc&template=null");}-->
            {loop $tags $k $t}
            {if $k==0}
            <a type=""  Shape="" page="2" class="goPage" href="#" style="left:322px;"><img src="{$t[thumb]}" width="355" height="720"/></a>
            {elseif $k==1}
            <a type=""  Shape="" page="3" class="goPage" href="#" style="left:713px;"><img src="{$t[thumb]}" width="355" height="720"/></a>
            {elseif $k==2}
            <a  type="img"  Shape="" url="{DT_STATIC}hnr/screen/dist/video-img/xxsc.jpg" href="#" style="left:1103px;"><img src="{$t[thumb]}" width="355" height="720"/></a>
            {elseif $k==3}
            <a type=""  Shape="" href="{$t[linkurl]}" target="_self" style="left:1495px;"><img src="{$t[thumb]}" width="355" height="720"/></a>
            {/if}
            {/loop}
        </div>
    </div>
    <div id="page2" style="display: none;">
        <div class="swiper-slide page_list page2">
            <!-- Swiper -->
            <div class="my-swiper-container">
                <div class="swiper-wrapper">
                    <!--{php $tags=tag("moduleid=$moduleid&condition=catid=1048 and status=3&offset=0&pagesize=50&order=level desc,addtime desc&template=null");}-->
                    {loop $tags $k $t}
                    {if $k%6==0}
                    <div class="swiper-slide">
                        <a type="video" liu="{$t[vtype]}" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:219px; top:243px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==1}
                        <a type="video" liu="{$t[vtype]}" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:747px; top:243px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==2}
                        <a type="video" liu="{$t[vtype]}" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:1275px; top:243px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==3}
                        <a type="video" liu="{$t[vtype]}" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:219px; top:578px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==4}
                        <a type="video" liu="{$t[vtype]}" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:747px; top:578px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==5}
                        <a type="video" liu="{$t[vtype]}" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:1275px; top:578px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {/if}
                        {if $k%6==5 || $k==count($tags)-1}
                    </div>
                    {/if}
                    {/loop}
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div class="home"></div>
        </div>
    </div>
    <div id="page3" class="page_list" style="display: none;">
        <div class="swiper-slide page_list page3">
            <!-- Swiper -->
            <div class="my-swiper-container">
                <div class="swiper-wrapper">
                    <!--{php $tags=tag("moduleid=$moduleid&condition=catid=1047 and status=3&offset=0&pagesize=50&order=level desc,addtime desc&template=null");}-->
                    {loop $tags $k $t}
                    {if $k%6==0}
                    <div class="swiper-slide">
                        <a type="video" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:219px; top:243px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==1}
                        <a type="video" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:747px; top:243px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==2}
                        <a type="video" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:1275px; top:243px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==3}
                        <a type="video" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:219px; top:578px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==4}
                        <a type="video" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:747px; top:578px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {elseif $k%6==5}
                        <a type="video" Shape="{$t[direction]}" url="{$t[mmlurl]}" href="#" style="left:1275px; top:578px;"><img src="{$t[thumb]}" width="488" height="278"/></a>
                        {/if}
                        {if $k%6==5 || $k==count($tags)-1}
                    </div>
                    {/if}
                    {/loop}
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div class="home"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://d1.hnr.cn/hnr2015/public/jquery-1.11.3.min.js"></script>
<!-- Swiper JS -->
<script src="{DT_STATIC}hnr/screen/dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container',{
        on: {
            touchStart: function(event){
                if(0==this.activeIndex && isactive==0){
                    swiper.removeSlide(1);
                }
            },
        },
    })

    var isactive=0,$play=document.getElementById("play");
    $(document).ready(function(){
        $(".goPage").click(function(e){
            var page=$(this).attr("page");
            isactive=1;
            swiper.appendSlide($('#page'+page).html());
            swiper.slideTo(page-1, 1000, false);
            isactive=0;
            event.stopPropagation();
            var myswiper = new Swiper('.my-swiper-container', {
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        })
        $(".swiper-container").on("click", 'a', function(){
            if($(this).attr("type")=="video"){
                if($(this).attr("liu")=="m3u8"){
                    $("#player").html('<object type="application/x-shockwave-flash" id="Main" name="Main" align="middle" data="http://www.hnr.cn/video2016/Main.swf" width="1920" height="1080"><param name="wmode" value="transparent"><param name="quality" value="high"><param name="bgcolor" value="#000"><param name="allowscriptaccess" value="sameDomain"><param name="allowfullscreen" value="true"><param name="flashvars" value="playerWidth=1920&amp;playerHeight=1080&amp;url='+$(this).attr("url")+'&amp;pic=http://d1.hnr.cn/hnr2015/public/video2015/preview.gif&amp;isauto=true&amp;ad="></object>');
                    $("#playBox").show();
                }else{
                    $("#player").html('<video style="height: 100%;width: auto;" src="'+$(this).attr("url")+'"  id="play" controls="controls">您的浏览器不支持 video 标签。</video>');
                    /*if($(this).attr("Shape")=="sd"){
                        $("#play").addClass("style");
                    }
                    else{
                        $("#play").removeClass("style");
                    }*/
                    var $play=document.getElementById("play");
                    $play.play();
                    $("#playBox").show();
                }
                $(".default__button--big").hide();
            }
            else if($(this).attr("type")=="img"){
                $("#playBox1").find("img").attr("src",$(this).attr("url"));
                $("#playBox1").show();
            }
        })
        $("#close").click(function(){
            $("#player").html("");
            // $play.pause();
            // $("#play").attr("src","");
            $("#playBox").hide();
        })
        $("#close1").click(function(){
            $("#playBox1").find("img").attr("src","");
            $("#playBox1").hide();
        })
        for(var i=0;i<=$(".my-swiper-container").length;i++){
            if($(".my-swiper-container").eq(i).find(".swiper-slide").length<=1){
                $(".my-swiper-container").eq(i).find(".swiper-button-next,.swiper-button-prev").hide();
            }
        }
        //返回首页
        $(".swiper-container").on("click", '.home', function(){
            swiper.slideTo(0, 1000, false);
        })
    })
</script>
</body>
</html>
